<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-col-xs-9 {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-control-content {
				display: block;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			
			.mui-icon-plus {
				float: right;
			}
			/*.mui-table-view-cell>a:not(.mui-btn) {
				float: left;
				width: 60%;
			}*/
			
			.mui-bar-nav {
				position: absolute;
				z-index: 99;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">菜单</h1>
		</header>
		<div class="mui-content mui-row mui-fullscreen" style="margin-top: 50px;">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<ul class="mui-table-view">
					</ul>

				</div>
			</div>

			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
				<div id="content' + index + '" class="mui-control-content" style="">
					<ul class="mui-table-view">
					</ul>
				</div>
			</div>

		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-icon mui-icon-list mui-pull-right" href="cart.html">
			</a>
		</nav>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/model.js"></script>

		<script>
			mui.plusReady(function() {
				var tid = plus.storage.getItem("table_id");
				console.log(tid + "测试");

			});

			//点击按钮添加到购物车
			function addToCart(dishId) {
				var selector = "li[data-did=" + dishId + "] div.mui-media-body";
				var dname = $(selector).text();
				console.log(dname + dishId);
				plus.storage.setItem(dishId + "", "{id:" + dishId + ",dname:'" + dname + "',num:1}");
			}

			//向服务器请求菜品数据
			//分类信息
			var resultData1 = Model.menu.getType();
			//获得菜品信息
			var resultData2 = Model.menu.getMenu();
			successMethod()
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			//数据处理显示方法
			function successMethod() {
				var controls = document.getElementById("segmentedControls");
				var contents = document.getElementById("segmentedControlContents");
				var html = [];
				var cDataList = resultData1.menutypelist;
				var dishData = resultData2.menulist;
				var i = 0,
					j = 0,
					m = cDataList.length, //左侧选项卡数量
					n = 21; //每个选项卡列表数量
				//循环显示左侧菜单分类列表
				$.each(cDataList, function(index, item) {
					html.push('<a class="mui-control-item" data-index="' + index + '" href="#content' + index + '">' + item.name + '</a>');
				});

				controls.innerHTML = html.join('');
				//循环显示分类下所有菜品列表
				html = [];

				$.each(cDataList, function(index, item) {
					html.push('<div id="content' + index + '" class="mui-control-content" style=""><ul class="mui-table-view">');
					var cid = item.id;
					console.log(cid);
					$.each(dishData, function(j, it) {
						if(cid == it.menutypetbl.id) {
							var temp = it;
							html.push('<li class="mui-table-view-cell mui-media" data-did="' + temp.id + '">' +
								'<img class="mui-media-object mui-pull-left" width="100px" height="100px" src="' + temp.pic + '">' +
								'<div class="mui-media-body">' + temp.name + '</div>' +
								'</li>');

						}

					});
					html.push('</ul></div>');
				});

				contents.innerHTML = html.join('');
				//默认选中第一个
				controls.querySelector('.mui-control-item').classList.add('mui-active');
				//			contents.querySelector('.mui-control-content').classList.add('mui-active');
				(function() {
					var controlsElem = document.getElementById("segmentedControls");
					var contentsElem = document.getElementById("segmentedControlContents");
					var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
					var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
					var controlWrapperElem = controlsElem.parentNode;
					var controlWrapperHeight = controlWrapperElem.offsetHeight;
					var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight; //左侧类别最大可滚动高度
					var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight; //右侧内容最大可滚动高度
					var controlHeight = controlListElem[0].offsetHeight; //左侧类别每一项的高度
					var controlTops = []; //存储control的scrollTop值
					var contentTops = [0]; //存储content的scrollTop值
					var length = contentListElem.length;
					for(var i = 0; i < length; i++) {
						controlTops.push(controlListElem[i].offsetTop + controlHeight);
					}
					for(var i = 1; i < length; i++) {
						var offsetTop = contentListElem[i].offsetTop;
						if(offsetTop + 100 >= maxScroll) {
							var height = Math.max(offsetTop + 100 - maxScroll, 100);
							var totalHeight = 0;
							var heights = [];
							for(var j = i; j < length; j++) {
								var offsetHeight = contentListElem[j].offsetHeight;
								totalHeight += offsetHeight;
								heights.push(totalHeight);
							}
							for(var m = 0, len = heights.length; m < len; m++) {
								contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
							}
							break;
						} else {
							contentTops.push(parseInt(offsetTop));
						}
					}
					contentsElem.addEventListener('scroll', function() {
						var scrollTop = contentsElem.scrollTop;
						for(var i = 0; i < length; i++) {
							var offsetTop = contentTops[i];
							var offset = Math.abs(offsetTop - scrollTop);
							//						console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
							if(scrollTop < offsetTop) {
								if(scrollTop >= maxScroll) {
									onScroll(length - 1);
								} else {
									onScroll(i - 1);
								}
								break;
							} else if(offset < 20) {
								onScroll(i);
								break;
							} else if(scrollTop >= maxScroll) {
								onScroll(length - 1);
								break;
							}
						}
					});
					var lastIndex = 0;
					//监听content滚动
					var onScroll = function(index) {
						if(lastIndex !== index) {
							lastIndex = index;
							var lastActiveElem = controlsElem.querySelector('.mui-active');
							lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
							var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
							currentElem.classList.add('mui-active');
							//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
							var controlScrollTop = controlWrapperElem.scrollTop;
							if(controlScrollTop + controlWrapperHeight < controlTops[index]) {
								controlWrapperElem.scrollTop = controlMaxScroll;
							} else if(controlScrollTop > controlTops[index] - controlHeight) {
								controlWrapperElem.scrollTop = 0;
							}
						}
					};

					mui(".mui-control-content").on('tap', '.mui-table-view-cell', function() {
						//获取id
						var id = this.getAttribute("data-did");
						location.href="good.html?id="+id+""
						//传值给详情页面，通知加载新数据
					})

					//滚动到指定content
					var scrollTo = function(index) {
						contentsElem.scrollTop = contentTops[index];
					};
					mui(controlsElem).on('tap', '.mui-control-item', function(e) {
						scrollTo(this.getAttribute('data-index'));
						return false;
					});

				})();

			}
		</script>

	</body>

</html>